<template>
  <div class="container">
    <!-- <v-header :goBack="true" signinUp="true"></v-header> -->
    <div class="register-wrp">
      <header id="header" class="header">
        <div class="take-desc"></div>
        <div class="cash"></div>
        <div class="other d-flex">
          <div class="people"></div>
          <div class="icon-wrp flex-fill">
            <div class="no-audit"></div>
            <div class="bottom d-flex justify-content-between">
              <div class="low-rate"></div>
              <div class="quick-cash"></div>
            </div>
          </div>
        </div>
      </header>
      <div class="section">
        <form autocomplete="false">
          <fieldset class="field-wrp">
            <div class="form-group border-bottom-1px">
              <input type="tel" name="mobile" class="form-control" maxlength="11" v-model="ruleForm.mobile" placeholder="请输入手机号"/>
            </div>
            <div class="input-group">
              <input type="tel" class="form-control" name="captcha" maxlength="6" v-model="ruleForm.captcha" placeholder="请输入验证码">
              <div class="input-group-append">
                <button type="button" class="input-group-text" @click="sendCaptcha" v-show="timeLeft === 0">获取验证码</button>
                <button type="button" class="input-group-text" @click="sendCaptcha" v-show="timeLeft > 0">{{timeLeft}}s</button>
              </div>
            </div>
            <div class="agreement d-flex form-group">
              <span class="text">点击即同意</span>
              <a class="text link" href="javascript:void(0);" @click="showAgreement()">《用户服务协议》</a>
            </div>
            <div class="form-group btn-register">
              <button type="button" class="btn btn-block" @click="submitForm('form-validate')">登录</button>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
    <v-agreement ref="agreement"></v-agreement>
    <div class="bg"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {captchaQuickLogin, loginRegister} from '@/service/index'
  import Validate from '@/utils/Validate'
  import Util from '@/utils/Util'
  import userAgreement from '@/components/common/user-agreement'

  export default {
    props: ['agentId'],
    data() {
      return {
        timeLeft: 0,
        agreement: 0,
        ruleForm: {
          mobile: '',
          captcha: ''
        }
      }
    },
    methods: {
      register() {
        let params = this.ruleForm

        loginRegister(params.mobile, params.captcha, this.agentId)
          .then((resp) => {
            console.log(resp)
            Util.handleResponse(resp, resp.msg, function () {
              // _this.$router.push('/index')
              location.href = resp.redirectUrl
            })
          })
          .catch((error) => {
            console.log(error)
          })
      },
      submitForm(formName) {
        let validator = new Validate(
          {
            mobile: {
              required: true,
              tel: true
            },
            captcha: {
              required: true,
              digits: true,
              minlength: 6,
              maxlength: 6
            }
          },
          {
            mobile: {
              required: '请输入手机号',
              tel: '请输入正确的手机号'
            },
            captcha: {
              required: '请输入验证码',
              digits: '请输入6位数字验证码',
              minlength: '请输入6位数字验证码',
              maxlength: '请输入6位数字验证码'
            }
          }
        )
        if (!validator.checkForm(this.ruleForm)) {
          const error = validator.errorList[0]
          Util.msg(error.msg)
          return false
        }
        this.register()
      },
      sendCaptcha() {
        let _this = this
        if (!this.isPhone()) {
          return
        }
        if (this.timeLeft > 0) {
          return Util.msg('短信已发送，请注意查收')
        }

        captchaQuickLogin(this.ruleForm.mobile, this.agentId)
        .then((resp) => {
          console.log(resp)
          if (parseInt(resp.code) === 1) {
            _this.countDown()
          } else {
            Util.msg(resp.msg)
          }
        }).catch((error) => {
          console.log(error)
        })
      },
      isPhone() {
        return (/^1[34578]\d{9}$/.test(this.ruleForm.mobile))
      },
      countDown() {
        let _this = this
        _this.timeLeft = 60
        this.timer = setInterval(function () {
          _this.timeLeft--
          if (_this.timeLeft <= 0) {
            clearInterval(_this.timeLeft)
            _this.timeLeft = 0
          }
        }, 1000)
      },
      showAgreement() {
        this.$refs.agreement.showAgreement()
      }
    },
    components: {
      'v-agreement': userAgreement
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/variable.styl"

  .bg
    position: absolute
    top: 0
    bottom: 0
    left: 0
    right: 0
    background: #FF5302
    z-index: -1
  .register-wrp
    .header
      padding: 0 0.8rem
      background-image: linear-gradient(-180deg, #FFC700 0%, #FF6C26 100%)
      .take-desc
        height: 8rem
        background-size: 100% 100%
        bg-image('/static/images/register/credit_card')
      .cash
        height: 3.6rem
        margin-top: -3.3rem
        background-size: 100% 100%
        bg-image('/static/images/register/card_ma')
      .other
        .people
          width: 6rem
          height: 6.6rem
          margin-left: 1.16rem
          margin-top: -2.26666rem
          background-repeat: no-repeat
          background-size: 100% 100%
          bg-image('/static/images/register/people')
          z-index: 10
        .icon-wrp
          .no-audit
            width: 3rem
            height: 1.6rem
            margin-top: -0.6rem
            margin-left: 2rem
            background-repeat: no-repeat
            background-size: 100% 100%
            bg-image('/static/images/register/no_audit')
          .bottom
            margin-top: 1.2rem
            .low-rate
              width: 3rem
              height: 1.6rem
              margin-left: -1.5rem
              background-repeat: no-repeat
              background-size: 100% 100%
              bg-image('/static/images/register/low_rate')
            .quick-cash
              width: 3rem
              height: 1.6rem
              margin-right: 1rem
              background-repeat: no-repeat
              background-size: 100% 100%
              bg-image('/static/images/register/quick_cash')
    .section
      background: #FF5302
      margin-top: 0 !important
      padding-top: 20px
      .field-wrp
        .agreement
          .text
            font-size: .6rem
            color: $color-white
            &.link
              text-decoration: underline
        .input-group
          .form-control
            border-right: none
          .input-group-append
            .input-group-text
              font-size: 14px
              color: $color-light-red
              background-color: $color-white
              border-left: none
        .form-group
          &.btn-register
            margin-top: 1.2rem
            margin-bottom: .4rem
            .btn
              border-radius: 10px
</style>
